<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>情境情绪应对初级</title>
    <link rel="stylesheet" type="text/css" href="../../../../css/aui.css" />
    <script src='../../../../CommonTool/commonNetWork.js'></script>
    <script src="../../../../script/jquery.js"></script>
   <script src="../SituationalCoping.js"></script>
   <link rel="stylesheet" href="../SituationlCoping.css">
</head>
<body>
    <header class="aui-bar aui-bar-nav" id="aui-header">
        <div class="aui-pull-left aui-btn" onclick="close_win();">
            <span class="aui-iconfont aui-icon-left"></span>返回
        </div>
        <div class="aui-title">场景-高级-情境情绪应对</div> 
    </header>
    <div class="aui-grid" style="margin-top:1%">
        <div class="aui-row">
            <div class="aui-col-xs-1"></div>
            <div class="aui-col-xs-10">
                <div class="image-container">
                    <div class="ImageBackground">
                      <div class="image" id="image1" data-target="blank-box4" style="position: relative;z-index: 99 !important;">
                        <img src="http://172.16.32.194/social/advanced/情境情绪应对/3/4.png" alt="Image 1" >
                    </div>
                    </div>
                    <div class="ImageBackground">
                      <div class="image" id="image2" data-target="blank-box2" style="position: relative;z-index: 99 !important;">
                        <img src="http://172.16.32.194/social/advanced/情境情绪应对/3/2.png" alt="Image 2" style="z-index: 99;">
                    </div>
                    </div>
                    <div class="ImageBackground">
                        <div class="image" id="image3" data-target="blank-box3" style="position: relative;z-index: 99 !important;">
                          <img src="http://172.16.32.194/social/advanced/情境情绪应对/3/3.png" alt="Image 1" style="z-index: 99;">
                      </div>
                      </div>
                      <div class="ImageBackground">
                        <div class="image" id="image4" data-target="blank-box1" style="position: relative;;z-index: 99 !important;">
                          <img src="http://172.16.32.194/social/advanced/情境情绪应对/3/1.png" alt="Image 2" style="z-index: 99;">
                      </div>
                      </div>
                  </div>
                  <img src="http://172.16.32.194/commonButton/dong.gif" alt="" id="floatingImage1" class="float-image">
                  <img src="http://172.16.32.194/commonButton/dong.gif" alt="" id="floatingImage2" class="float-image">
                  <img src="http://172.16.32.194/commonButton/dong.gif" alt="" id="floatingImage3" class="float-image">
                  <img src="http://172.16.32.194/commonButton/dong.gif" alt="" id="floatingImage4" class="float-image">
                  <div class="dropBody">
                    <div class="blank-box" id="blank-box1">
                        <span class="box-number" id="number1">1</span>
                    </div>
                    <div class="blank-box" id="blank-box2">
                        <span class="box-number" id="number2">2</span>
                    </div>
                    <div class="blank-box" id="blank-box3">
                        <span class="box-number" id="number3">3</span>
                    </div>
                    <div class="blank-box" id="blank-box4">
                        <span class="box-number" id="number4">4</span>
                    </div>
                  </div>
            </div>
    </div>
        </div>
    </div>
    <div  class="footbar" >
      <p class="barLeft" onclick="toggleMenu()">第三关</p>
      <p class="barCenter">
          <div id="InitialButton" style="float:left;margin-left:4%;" onclick="InitialClick1()">
              <img id="passImg" src="http://172.16.32.194/commonButton/加号.png" alt="">
          </div> 
              <div id="InitialButton1" style="float:left;margin-left:4%;display: none;" onclick="ShowInitialClick1()">
                  <img id="passImg" src="http://172.16.32.194/commonButton/减号.png" alt="">
              </div> 
              <div id="InitialButton2" style="float:left; margin-left:3%;display: none;" >
                <audio src="http://172.16.32.194/social/sort.mp3"   id="audioBody"  controls autoplay ></audio>  
                <img style="width: 2rem;height: 1.6rem;margin-top:12%" src="http://172.16.32.194/commonButton/播放2.png" alt="" onclick="ImgAudioClick()">
            </div> 
              <div id="InitialButton4" style="float:left;margin-left:4%;display: none;" onclick="ResetClick()">
                  <img id="passImg" src="http://172.16.32.194/commonButton/刷新1.png" alt="">
              </div> 
      </p>
             <p class="barright">
                <img  src="../../../../image/next2.png" alt=""  class="BarBottom" onclick="go_forward();">
            </p>
            <p class="barright">
                <img style="width: 3.5rem;height: 1.5rem;margin-top:6%"  src="http://172.16.32.194/commonButton/pass1.png" alt=""  onclick="passclick();">
            </p>
            <p class="barright">
                <img  src="http://172.16.32.194/commonButton/prev1.png" alt=""  class="BarBottom" onclick="next_forward();">
            </p>
  </div>
           <!-- 全部答对   -->
       <div class="backdrop_bg" id="backdrop_bgright" onclick="hideRightPopup()">
        <audio src="http://172.16.32.194/tipvideo/right1.mp3" id="audioBodyRight"></audio>
            <div class="backdrop_contentGif" >
                <div id="backdrop_text"></div>
            </div>
    </div>
    <!-- 答错不得分 -->
    <div class="backdrop_bg" id="backdropMistake" onclick="hideMistake()">
        <audio src="http://172.16.32.194/tipvideo/error3.mp3" id="audioBodyMistake"></audio>
        <div class="backdrop_contentMistakeGif" >
            <div id="backdrop_text">
            </div>
        </div>
    </div>
         <!-- 通过 -->
 <div class="backdrop_bg" id="backdropPass">
    <audio src="http://172.16.32.194/commonButton/鼓掌音效.mp3" id="audioBodyPass"></audio>
    <div class="backdrop_contentPasseGif" >
    </div>
</div>
              <div class="menu" id="menu">
            <div class="menu-item" onclick="goto_page(1)">第一关</div>
            <div class="menu-item" onclick="goto_page(2)">第二关</div>
            <div class="menu-item" onclick="goto_page(3)">第三关</div>
            <div class="menu-item" onclick="goto_page(4)">第四关</div>
            <div class="menu-item" onclick="goto_page(5)">第五关</div>
            <div class="menu-item" onclick="goto_page(6)">第六关</div>
            <div class="menu-item" onclick="goto_page(7)">第七关</div>
            <div class="menu-item" onclick="goto_page(8)">第八关</div>
            <div class="menu-item" onclick="goto_page(9)">第九关</div>
            <div class="menu-item" onclick="goto_page(10)">第十关</div>
        </div>
</body>
</html>
 
<script>
    var token = "";
    var userid = "";
    var currentTimestamp = "";
    var operationName = "";
    var additionalInfo = "";
    var groupId = "";
    var scene = "场景";
    var sceneLevel = "高级";
    var courseType = "情境情绪应对";
    var classSort = "3";
    var moodType="生气";
    var remarks = "问题1";
    var classType = "学习";
apiready = function() {
        document.getElementById('audioBody').style.display='none'
        document.getElementById('floatingImage1').style.display='none'
        document.getElementById('floatingImage2').style.display='none'
        document.getElementById('floatingImage3').style.display='none'
        document.getElementById('floatingImage4').style.display='none'
        token = api.pageParam.token
        userid = api.pageParam.uid
        groupId = api.pageParam.groupId
        currentTimestamp = Date.now()
        operationName = 'ing'
        additionalInfo = ''
        CommonNetWork()
      }
      function passclick(){
        document.getElementById('backdropPass').style.display='block'
        document.getElementById('audioBodyPass').play()
        setTimeout(()=>{
            document.querySelectorAll("audio").forEach((audio) => audio.pause())
            api.openWin({
            name: 'Probrem2',
            url:'./Probrem2.html',
            pageParam: {
                uid: userid,
                token:token,
                groupId:groupId
                },
            reload:true,
        })
        },2000)
        currentTimestamp = Date.now()
        operationName = 'ing'
        additionalInfo = 'right'
        CommonNetWork()
    }
let startX, startY; // 记录触摸开始的坐标
        let isDragging = false; // 标记是否正在拖动
        let draggedImage; // 记录正在被拖动的图片元素
        let originalPosition; // 记录图片的原始位置信息
        let originalParent; // 记录图片原来所在的父元素
        var indexnumber=0
        var indexErrornumber =0
        var dragNumber = 0
        // 获取所有图片元素
        const images = document.querySelectorAll('.image');
        images.forEach(image => {
            image.addEventListener('touchstart', function (e) {
                // 获取触摸点的初始坐标
                startX = e.touches[0].pageX;
                startY = e.touches[0].pageY;
                isDragging = true;
                draggedImage = this;
                // 记录图片的原始位置信息（相对于视口的坐标和尺寸）
                originalPosition = {
                    left: this.offsetLeft,
                    top: this.offsetTop,
                    width: this.offsetWidth,
                    height: this.offsetHeight
                };
                // 记录图片原来所在的父元素
                originalParent = this.parentNode;
                
            });

            image.addEventListener('touchend', function (e) {
                isDragging = false;
                if (draggedImage) {
                    const blankBoxes = document.querySelectorAll('.blank-box');
                    blankBoxes.forEach(box => {
                   const rect = box.getBoundingClientRect();
                        const touchEndX = e.changedTouches[0].pageX;
                        const touchEndY = e.changedTouches[0].pageY;
                        if (touchEndX >= rect.left && touchEndX <= rect.right &&
                            touchEndY >= rect.top && touchEndY <= rect.bottom) {
                            const targetId = draggedImage.dataset.target;
                            dragNumber=dragNumber+1
                            if (box.id === targetId) {
                                // 计算图片在空白框中居中显示需要的偏移量 
                                // 这样写图片会消失
                                // const offsetX = (rect.width - draggedImage.offsetWidth) / 2;
                                // const offsetY = (rect.height - draggedImage.offsetHeight) / 2;
                                // draggedImage.style.position = 'absolute';
                                // draggedImage.style.left = `${rect.left + offsetX}px`;
                                // draggedImage.style.top = `${rect.top + offsetY}px`;
                                if(targetId=='blank-box1'){
                                    indexnumber=indexnumber+1
                                    document.getElementById('number1').style.display='none'
                                }
                                if(targetId=='blank-box2'){
                                    indexnumber=indexnumber+1
                                    document.getElementById('number2').style.display='none'
                                }
                                if(targetId=='blank-box3'){
                                    indexnumber=indexnumber+1
                                    document.getElementById('number3').style.display='none'
                                }
                                if(targetId=='blank-box4'){
                                    indexnumber=indexnumber+1
                                    document.getElementById('number4').style.display='none'
                                }
                              box.style.border = '4px dashed green';
                              box.style.zIndex='100'
                              box.style.position='relative'
                              box.classList.add('dropped');
                              originalParent.appendChild(draggedImage);
                            }
                             else {
                                indexErrornumber = indexErrornumber+1
                                 document.getElementById('number1').style.zIndex='-100 !important;'
                                 document.getElementById('number2').style.zIndex='-100 !important;'
                                 document.getElementById('number3').style.zIndex='-100 !important;'
                                 document.getElementById('number4').style.zIndex='-100 !important;'
                                 box.style.zIndex='100 !important'
                                 box.style.position='relative'
                                 box.style.border = '4px dashed red';
                            }
                            if(indexnumber===4 && indexErrornumber == 0){
                                document.getElementById('backdrop_bgright').style.display='block'
                                document.getElementById('audioBodyRight').play()
                              }
                            if(indexErrornumber>0 && dragNumber==4){
                                document.getElementById('backdropMistake').style.display='block'
                                document.getElementById('audioBodyMistake').play()
                                }
                          }
                        
                    });
                }
            });
        });


    document.addEventListener('touchmove', function (e) {
        if (isDragging && draggedImage) {
            e.preventDefault(); // 阻止默认的滚动等行为
            const currentX = e.touches[0].pageX;
            const currentY = e.touches[0].pageY;
            const dx = currentX - startX;
            const dy = currentY - startY;
            draggedImage.style.transform = `translate(${dx}px, ${dy}px)`;
        }
    }, { passive: false }); // 添加这个选项，设置为false表示不采用被动监听模式

    function go_forward(){
       document.querySelectorAll("audio").forEach((audio) => audio.pause())
        currentTimestamp = Date.now()
        operationName = 'ing'
        additionalInfo = ''
        CommonNetWork()
        api.openWin({
            name: 'Probrem2',
            url:'./Probrem2.html',
               pageParam: {
                    uid: userid,
                    token:token,
                    groupId:groupId
                },
            reload:true
        })
    }
    function next_forward(data){
       document.querySelectorAll("audio").forEach((audio) => audio.pause())
        currentTimestamp = Date.now()
        operationName = 'end'
        additionalInfo = ''
        CommonNetWork()
          api.openWin({
              name: 'Story1',
              url:'./Story1.html',
              pageParam: {
                uid: userid,
                token:token,
                groupId:groupId
                },
              reload:true,
          })
      }
   function goto_page(number) {
        const pages = [
            "Material1",
            "Material2",
            "Material3",
            "Material4",
            "Material5",
            "Material6",
            "Material7",
            "Material8",
            "Material9",
            "Material10",
           
        ];
        var name = pages[number-1]
        var url = "../" + name + "/Story1.html"
                document.querySelectorAll("audio").forEach((audio) => audio.pause())
        currentTimestamp = Date.now();
        operationName = "end";
        additionalInfo = "";
        CommonNetWork();
        api.openWin({
            name: name,
            url: url,
            pageParam: {
                uid: userid,
                token: token,
                groupId: groupId,
            },
            reload: true,
        });
    }
    function toggleMenu() {
        var menu = document.getElementById("menu");
        if (menu.style.display === "none" || menu.style.display === "") {
            menu.style.display = "block";
        } else {
            menu.style.display = "none";
        }
    }
</script>